<template>
  <wx-tables
    :columns="columns"
    title="班级管理"
    :data-source="dataSource"
    :loading="loading"
    :total="total"
    :size.sync="size"
    :page.sync="page"
  >
    <!-- tools -->
    <template v-slot:department_name="record">{{ record.row.department && record.row.department.name }}</template>
    <template #tools>
      <el-button type="primary" class="table-btn" @click="handleOpenForm()">添加班级</el-button>
      <!--      <el-button class="table-btn" icon="el-icon-refresh-right" @click="handleGetTable">刷新</el-button>-->
    </template>
    <template v-slot:oper="record">
      <div class="oper-box">
        <span><el-link type="primary" @click="handleOpenForm(record.row.id,editCon,record.row)">编辑</el-link></span>
      </div>
    </template>
    <!-- 添加班级 -->
    <wx-dialog
      ref="wx-dialog"
      :visible.sync="formVisible"
      :is-add="isAdd"
      width="500px"
      @ok="handleSaveForm"
    >
      <div class="wx-dialog-form">
        <el-form
          ref="ruleForm"
          v-loading="formLoading"
          :rules="ruleForm"
          :model="formInfo"
          label-position="right"
          label-width="100px"
        >
          <el-form-item label="选择学部" prop="year_department_id">
            <el-select v-model="formInfo.year_department_id" placeholder="请选择学部">
              <el-option
                v-for="item in select_dept"
                :key="item.type"
                :label="item.label"
                :value="item.type"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择年级" prop="grade_name">
            <el-select v-model="formInfo.grade_name" placeholder="请选择年级">
              <el-option
                v-for="item in 20"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择班级" prop="name">
            <el-select v-model="formInfo.name" placeholder="请选择班级">
              <el-option
                v-for="item in 20"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="!isAdd" label="班级邀请码" prop="invite_code">
            <span>{{ formInfo.invite_code }}</span>
          </el-form-item>
        </el-form>
      </div>
    </wx-dialog>
  </wx-tables>
</template>

<script>
import WxDialog from '@/components/WxDialog'
import WxTables from '@/components/WxTables'
import TableMixins from '@/components/WxTables/mixins'
import { get } from '@/utils/request'

export default {
  name: 'Class',
  components: {
    WxDialog,
    WxTables
  },
  mixins: [TableMixins],
  data() {
    return {
      formInfo: {
        school_id: 1
      },
      editCon: ['name', 'year_grade_id', 'year_department_id', 'grade_name', 'invite_code', 'school_id'],
      columns: [
        { config: { type: 'index', width: 100 }, label: '序号' },
        { dataIndex: 'department_name', label: '学部', slots: true },
        { dataIndex: 'grade_name', label: '年级' },
        { dataIndex: 'name', label: '班级名称' },
        { dataIndex: 'invite_code', label: '班级邀请码' },
        { dataIndex: 'oper', label: '操作', slots: true }
      ],
      markId: 'id',
      // 查询表格API
      api: 'api/adminPortal/classGrade/getListByCon?level=year_grade,department,class,',
      // 根据ID markId 查询
      // findApi: '/systemAdmin/getById',
      // 接口前缀 修改
      baseApi: 'api/adminPortal/classGrade/',
      ruleForm: {
        year_department_id: [
          { required: true, message: '请选择学部', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请选择班级', trigger: 'blur' }
        ],
        grade_name: [
          { required: true, message: '请选择年级', trigger: 'blur' }
        ]
      },
      select_grade: [],
      select_dept: []
    }
  },
  watch: {
    dataSource() {
      this.dataSource.forEach((item) => {
        item.grade_name = item.grade.name
        console.log(item.grade_name)
      })
    }
  },
  mounted() {
    this.handleGetYearDepartment()
  },
  methods: {
    handleGetYearDepartment() {
      get('api/adminPortal/yearDepartment/getListByCon?level=year_grade').then((res) => {
        this.select_dept = res.data.data.map((item) => {
          const list = {
            type: item.id,
            label: item.name
          }
          return list
        })
      })
    }
  }
}
</script>
<style lang="scss" src="./style/index.scss" scoped/>
